<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.mobile" />
      </el-form-item>
      <el-form-item label="口味">
        <el-select
          v-model="form.hobby"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择喜欢的口味"
        >
          <el-option
            v-for="item in options"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import getClassOptions from '@/api/class'
import { addUser } from '@/api/user'

export default {
  name: 'Index',
  data() {
    return {
      form: {
        name: '',
        username: '',
        password: '',
        mobile: '',
        hobby: ''
      },
      options: []
    }
  },
  created() {
    this.getOptions()
  },
  methods: {
    onSubmit() {
      this.form.hobby = this.form.hobby.toString()
      addUser(this.form).then(res => {
        console.log(res)
        if (res.code === 100) {
          this.$message({
            message: '添加用户成功',
            type: 'success'
          })
          this.form = {}
        }
      })
    },
    getOptions() {
      const data = {}
      getClassOptions(data).then(res => {
        console.log(res)
        this.options = res.data
        console.log(this.options)
      })
    }
  }
}

</script>

<style scoped>

</style>
